import React from "react";
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  ScrollView,
  Platform
} from "react-native";

import CommonStyles from "../../common/CommonStyles";
import SizeUtils from "../../common/SizeUtils";
import Constants from "../../common/Constants";
import ImageConstants from "../../common/ImageConstants";
import BaseComponent from "../common/BaseComponent";
import CommonAvatarView from "../common/CommonAvatarView";
import UserRequestSelfDataAction from "../../actions/user/UserRequestSelfDataAction";
import LoginCheckIsUserAction from "../../actions/login/LoginCheckIsUserAction";
import Config from "../../config";
import UserUpdateSelfDataAction from "../../actions/user/UserUpdateSelfDataAction";
import TImage from "../../components/TImage";
import NoticeIcon from "../user/NoticeIcon";
import TIcon from "../../components/TIcon";
const BUTTON_DATA = [
  {
    text: "我的收藏",
    page: Config.pages.user_shoucang,
    url: require("../../../resource/images/user/love.png"),
    width: 40,
    height: 40
  },
  {
    text: "我的点赞",
    page: Config.pages.user_dianzan,
    url: require("../../../resource/images/user/zan.png"),
    width: 40,
    height: 40
  },
  {
    text: "我报名的活动",
    page: Config.pages.user_baoming,
    url: require("../../../resource/images/user/huoodng.png"),
    width: 40,
    height: 40
  },
  {
    text: "实名认证",
    page: Config.pages.user_renzheng,
    url: require("../../../resource/images/user/rz.png"),
    width: 40,
    height: 40
  },
  {
    text: "设置",
    page: Config.pages.user_shezhi,
    url: require("../../../resource/images/user/set.png"),
    width: 40,
    height: 40
  },
  {
    text: "联系我们",
    page: Config.pages.user_contact_us,
    url: require("../../../resource/images/user/callme.png"),
    width: 40,
    height: 40
  }
];

export default class UserView extends BaseComponent {
  constructor(props) {
    super(props);
    const userData = this.props.pageData.routeData.userData;
    this.state = {
      userData: userData,
      refresh: false,
      openImage: false,
      hasVerified:
        userData.ee_no != null &&
        userData.ee_no != "" &&
        userData.ee_no != "0" &&
        userData.name != null &&
        userData.name != ""
    };
    this._authorization = this.props.pageData.routeData.authorization;
  }

  componentWillUpdate(nextProps, nextState) {
    if (this._authorization != this.props.pageData.routeData.authorization) {
      this.setState({
        userData: this.props.pageData.routeData.userData
      });
      this._authorization = this.props.pageData.routeData.authorization;
      this._requestData();
    }
  }
  _dealEnterPage() {
    this._requestData()
  }
  componentDidMount() {
    this._requestData();
  }

  render() {
    if (this.state.userData) {
      return (
        <View style={{ flex: 1 }}>
          <Image
            resizeMode="stretch"
            source={require("../../../resource/images/user/wodebg.png")}
            style={{
              position: "absolute",
              alignItems: "center",
              backgroundColor: "transparent",
              alignSelf: "stretch",
              width: SizeUtils.getWindowSize().width,
              height: SizeUtils.translateDesignHeightToCode(305)
            }}
          />
          {this._renderTitleBar()}
          <ScrollView style={{ flex: 1 }}>
            {this._renderAvatar()}
            <View
              style={{
                backgroundColor: "#ffffff",
                marginBottom: SizeUtils.translateDesignHeightToCode(100)
              }}
            >
              {BUTTON_DATA.map((data, index) => {
                return this._renderItem(index);
              })}
            </View>
          </ScrollView>
          <View style={{position:'absolute',top:20,right:20}}>
            <NoticeIcon isWhite={true} authorization={this.props.authorization} />
          </View>
        </View>
      );
    }
    return <View />;
  }

  _renderAvatar() {
    return (
      <View
        style={{
          backgroundColor: "transparent",
          height: SizeUtils.translateDesignHeightToCode(168)
        }}
      >
        <View style={{ flexDirection: "row" }}>
          <CommonAvatarView
            style={{
              marginLeft: SizeUtils.translateDesignWidthToCode(28),
              marginRight: SizeUtils.translateDesignWidthToCode(30)
            }}
            avatarUri={
              this.state.userData ? this.state.userData.avatar_url : ""
            }
            size={128}
          />
          <View style={{ flex: 1 }}>
            <View
              style={{
                flexDirection: "row",
                flex: 1,
                alignItems: "flex-end",
                justifyContent: "space-between"
              }}
            >
              <Text
                style={{
                  fontSize: SizeUtils.translateFontSizeToCode(36),
                  marginTop: SizeUtils.translateDesignHeightToCode(30),
                  height:SizeUtils.translateFontSizeToCode(40),
                  color: "#fff",
                  backgroundColor: "transparent"
                }}
              >
                {this._getName()}
              </Text>
              {!this.state.hasVerified && (
                <TouchableOpacity
                  style={{
                    flexDirection: "row",
                    alignItems: "center",
                    marginRight: SizeUtils.translateDesignWidthToCode(28)
                  }}
                  onPress={() => this._onPressItem(3)}
                >
                  <Text
                    style={{
                      fontSize: SizeUtils.translateFontSizeToCode(24),
                      color: "#ffffff"
                    }}
                  >
                    未实名认证{" "}
                  </Text>
                  <TIcon
                    name="ion|ios-arrow-forward-outline"
                    size={20}
                    color="#ffffff"
                    style={{ width: 20, height: 20 }}
                  />
                </TouchableOpacity>
              )}
            </View>
            <Text
              style={{
                fontSize: SizeUtils.translateFontSizeToCode(22),
                color: "#fff",
                marginTop: SizeUtils.translateDesignHeightToCode(14),
                marginBottom: SizeUtils.translateDesignHeightToCode(20)
              }}
            >
              {this.getDepartment()}
            </Text>
            <View
              style={{
                flexDirection: "row",
                flex: 1,
                alignItems: "flex-end",
                justifyContent: "space-between"
              }}
            >
              <TouchableOpacity
                style={{
                  height: SizeUtils.translateDesignHeightToCode(36),
                  paddingRight: SizeUtils.translateDesignWidthToCode(20),
                  paddingLeft: SizeUtils.translateDesignWidthToCode(20),
                  borderRadius: SizeUtils.translateDesignHeightToCode(18),
                  borderColor: "#fff",
                  borderWidth: 1,
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "center"
                }}
                onPress={() => this._onPressZiliao()}
              >
                <Text
                  style={{
                    fontSize: SizeUtils.translateFontSizeToCode(20),
                    backgroundColor: "transparent",
                    color: "#fff"
                  }}
                >
                  编辑个人资料{" "}
                </Text>
                <Image
                  style={{
                    width: SizeUtils.translateDesignWidthToCode(18),
                    height: SizeUtils.translateDesignWidthToCode(18)
                  }}
                  source={require("../../../resource/images/user/mine.png")}
                />
              </TouchableOpacity>
              <View>
                <Text
                  style={{
                    color: "#fff",
                    fontSize: SizeUtils.translateFontSizeToCode(24),
                    marginRight: SizeUtils.translateDesignWidthToCode(28)
                  }}
                >
                  {this.state.userData&&this.state.userData.points||0}积分
                </Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }

  // 拼接所在单位及部门
  getDepartment() {
    const { userData } = this.state;
    if (userData.department && userData.section) {
      return `${userData.department}/${userData.section}`;
    }
    if (userData.department || userData.section) {
      return `${userData.department || "未知单位"}/${userData.section || "未知部门"}`;
    }
    return "待完善";
  }

  _renderTitleBar() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: SizeUtils.translateDesignHeightToCode(116),
          width: SizeUtils.getWindowSize().width,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "transparent"
        }}
      >
        <View
          style={{
            height: SizeUtils.translateDesignNumToCode(30),
            marginTop: 0
          }}
        >
          <Text
            style={{
              textAlign: "center",
              fontSize: SizeUtils.translateFontSizeToCode(34),
              color: "#fff",
              fontFamily: "STHeitiSC-Medium"
            }}
          >
            我的
          </Text>
        </View>
      </View>
    );
  }

  _onPressAvatar() {
    new LoginCheckIsUserAction().call(
      this,
      { content: "你是游客身份，不能使用此功能" },
      result => {
        result && Config.pages.user_ziliao;
      }
    );
  }

  _onPressZiliao() {
    new LoginCheckIsUserAction().call(
      this,
      { content: "你是游客身份，不能使用此功能" },
      result => {
        result &&
          this.gotoPage(Config.pages.user_ziliao, {
            userData: this.state.userData
          });
      }
    );
  }

  _renderNavigationBarLeftButtonContent() {}

  _onPressNavigationBarLeftBtn() {}

  _renderNavigationBarTitle() {
    return (
      <View style={{ height: SizeUtils.translateDesignNumToCode(30) }}>
        <Text
          style={{
            textAlign: "center",
            fontSize: SizeUtils.translateFontSizeToCode(36),
            top: Config.tabBarTop,
            color: "#fff",
            fontFamily: "STHeitiSC-Medium"
          }}
        >
          {"我的"}
        </Text>
      </View>
    );
  }

  _getName() {
    if (this.state.userData.nick) {
      return this.state.userData.nick;
    } else {
      return "游客";
    }
  }

  _requestData() {
    new LoginCheckIsUserAction().call(this, { showAlert: false }, result => {
      if (result) {
        new UserRequestSelfDataAction().call(this);
      }
    });
  }

  _renderItem(index) {
    return (
      <TouchableOpacity
        key={index}
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          marginLeft: SizeUtils.translateDesignWidthToCode(26),
          marginRight: SizeUtils.translateDesignWidthToCode(0),
          height: this._getItemHeight(index),
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#eeeeee",
          paddingTop: this._getItemMarginTop(index)
        }}
        onPress={() => this._onPressItem(index)}
      >
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
              width: SizeUtils.translateDesignWidthToCode(44),
              height: SizeUtils.translateDesignWidthToCode(44)
            }}
          >
            <Image
              source={this._getItemImage(index)}
              style={{
                width: SizeUtils.translateDesignWidthToCode(
                  BUTTON_DATA[index].width
                ),
                height: SizeUtils.translateDesignWidthToCode(
                  BUTTON_DATA[index].height
                )
              }}
            />
          </View>
          <Text
            style={{
              marginLeft: SizeUtils.translateDesignWidthToCode(20),
              fontSize: SizeUtils.translateFontSizeToCode(28),
              color: "#000000"
            }}
          >
            {this._getItemText(index)}
          </Text>
        </View>
        <TIcon
          name="ion|ios-arrow-forward-outline"
          size={20}
          color="#333333"
          style={{
            width: SizeUtils.translateDesignWidthToCode(20),
            height: SizeUtils.translateDesignHeightToCode(20),
            marginRight: SizeUtils.translateDesignWidthToCode(26)
          }}
        />
      </TouchableOpacity>
    );
  }

  _onPressItem(index) {
    if (!this.state.userData) {
      return;
    }
    //联系我们
    if (BUTTON_DATA[index].text == "联系我们") {
      this.gotoPage(BUTTON_DATA[index].page, { userData: this.state.userData });
    } else {
      new LoginCheckIsUserAction().call(
        this,
        { content: "你是游客身份，不能使用此功能" },
        result => {
          result &&
            this.gotoPage(BUTTON_DATA[index].page, {
              userData: this.state.userData
            });
        }
      );
    }
  }

  _getItemMarginTop(index) {
    let top = 0;
    // if (index == BUTTON_DATA.length - 2) {
    //   top = 60;
    // }
    return SizeUtils.translateDesignHeightToCode(top);
  }

  _getItemHeight(index) {
    let height = 82;
    // if (index == BUTTON_DATA.length - 2) {
    //   height = 170;
    // }
    return SizeUtils.translateDesignHeightToCode(height);
  }

  _getItemText(index) {
    return BUTTON_DATA[index].text;
  }

  _getItemImage(index) {
    return BUTTON_DATA[index].url;
  }
}
